<template>
  <form class="mini-searchbar-form" @submit.prevent="onSubmit()">
    <input
      type="text"
      v-model="keyWord"
      onblur="if(this.value==''){this.value='搜索ESDN';}"
      onfocus="if(this.value=='搜索ESDN'){this.value='';}"
    />
    <button>搜索</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      keyWord: "输入关键词",
    };
  },
  methods: {
    onSubmit() {
      if (this.keyWord !== "输入关键词" && this.keyWord !== "") {
        this.$router.push({
          path: "/searchresult",
          query: { keyWord: this.keyWord },
        });
      }
    },
  },
  created() {
    if (this.$route.query.keyWord !== undefined) {
      this.keyWord = this.$route.query.keyWord;
    }
  },
};
</script>

<style scoped>
button{
  cursor: pointer;
}
.mini-searchbar-form {
  margin-left: 96px;
  display: inline-block;
  height: 36px;
  width: 400px;
  margin-top: 6px;
}
.mini-searchbar-form > input {
  vertical-align: top;
  height: 36px;
  width: 320px;
  border: none;
  box-sizing: border-box;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.19);
  background-color: #f4f5f6;
  padding-left: 16px;
  color: #797979;
}
.mini-searchbar-form > input:focus {
  outline: none;
  color: black;
}
.mini-searchbar-form > button {
  font-size: 16px;
  font-weight: bold;
  height: 36px;
  width: 80px;
  color: white;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  border: none;
  background-color: #005a95;
}
</style>
